<template>
    <div>
        <base-form :fields="fields" v-model="form" ref="formRef" :readonly="!editing" labelWidth="140px">
        </base-form>
        <div class="text-center">
            <template v-if="!editing">
                <el-button type="primary" @click="startEdit">编辑</el-button>
                <el-button @click="close">关闭</el-button>
            </template>
            <template v-else>
                <el-button type="primary" @click="doSave">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </template>
        </div>
    </div>
</template>
<script setup>
    import https from '@/utils/https'
    import { ElMessage } from 'element-plus'
    import { onMounted } from 'vue'
    import * as _ from 'lodash'

    const emits = defineEmits(["close", "change"])
    const props = defineProps({
        item: Object,
        category: Object
    })
    const fields = [
        { label: '规则名称', prop: 'name', required: true },
        { label: '分类', prop: 'categoryId', type: 'treeSelect', options: loadCategory, required: true },
        { label: '关联模型', prop: 'modelId', type: 'select', options: loadModels, required: true },
        { label: '报警标题', prop: 'title', required: true, remark: '可使用${paramName}来表示参数占位，参数包括工况参数及设备编码__deviceCode、报警时间__alarmTime' },
        { label: '报警内容', prop: 'content', type: 'textarea', remark: '与标题一样可使用相同的参数占位' },
        {
            label: '报警规则', prop: 'rule', type: 'textarea', required: true, placeholder: "请输入报警规则",
            remark: `使用OGNL表达式，比如假设field_开头的为工况字段：<br/>
            field_a > 1：当field_a字段大于1时进行报警<br/>
            field_a == null：当field_a为空时报警<br/>
            field_b == 'test' and field_c == 'aaa'：表示当field_b为test并且field_c为aaa时进行报警<br/>
            field_b == 'test' or field_c == 'aaa'：表示field_b为test或field_c为aaa时进行报警<br/>
            (field_b == 'test' or field_c == 'aaa') and field_a > 1：表示field_b为test或field_c为aaa，并且field_a大于1时报警<br/>
            具体可参考OGNL相关文档`
        },
        { label: '报警等级', prop: 'level', type: 'number', min: 0, max: 10 },
        { label: '是否自动关闭', prop: 'autoClose', type: 'switch' },
        { label: '备注', prop: 'remark', type: 'textarea' },
        { label: '解决方案', prop: 'solution', type: 'textarea', rows: 10 }

    ]

    const form = ref({
        level: 3,
        autoClose: true,
        title: '设备(${__deviceCode})于(${__alarmTime})产生***报警'
    })
    const formRef = ref()
    const editing = ref(false)
    const bakForm = ref()

    onMounted(() => {
        if (props.item) {
            https.get('/manager/alarm-define/detail/' + props.item.id).then(resp => {
                form.value = resp
                editing.value = false
            })
        } else {
            editing.value = true
            if (props.category) {
                form.value.categoryId = props.category.id
            }
        }
    })

    function startEdit() {
        bakForm.value = _.cloneDeep(form.value)
        editing.value = true
    }

    function cancel() {
        if (form.value.id) {
            form.value = bakForm.value
            editing.value = false
        } else {
            close()
        }
    }

    function doSave() {
        formRef.value.validate(res => {
            if (!res) {
                return;
            }

            let params = form.value
            let fields = params.fields
            for (var i in fields) {
                var field = fields[i]
                if (!field.code || !field.name) {
                    ElMessage.error('属性编码或名称不能为空')
                    return
                }
            }

            https.post('/manager/alarm-define/save', form.value).then(resp => {
                ElMessage.success('操作成功')
                form.value = resp
                editing.value = false
                emits('change')
            })
        })
    }

    function loadCategory() {
        return https.get('/manager/alarm-category/tree')
    }

    function loadModels() {
        return https.post('/manager/device-model/query')
    }

    function close() {
        emits('close')
    }
</script>

<style lang='scss' scoped></style>